import React, { useCallback, useMemo, useRef } from 'react';
import { View, Text, StyleSheet, TouchableWithoutFeedback, Button } from 'react-native';
import { BottomSheetModal, BottomSheetModalProvider, BottomSheetView } from '@gorhom/bottom-sheet';
import { GestureHandlerRootView } from '@react-native-oh-tpl/react-native-gesture-handler'
import { TestCase, TestSuite, Tester } from '@rnoh/testerino';
const App = () => {
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);

  const snapPoints = useMemo(() => ['25%', '50%'], []);

  const handlePresentModalPress = useCallback(() => {
    bottomSheetModalRef.current?.present();
  }, []);

  // 简化的自定义容器
  const CustomContainerComponent = useCallback(
    ({ children }) => (
      <TouchableWithoutFeedback onPress={() => bottomSheetModalRef.current?.dismiss()}>
        <View style={styles.customContainer}>
          <Text style={{color:'white'}}>containerComponent属性测试</Text>
          <View style={styles.backdrop} />
          {children}
        </View>
      </TouchableWithoutFeedback>
    ),
    []
  );

  return (
    <Tester>
      <TestSuite name='containerComponent'>
        <TestCase itShould="BottomSheetModal style:containerComponent = {CustomContainerComponent}">
          <View style={styles.pageContainer}>
            <GestureHandlerRootView style={{ flex: 1 }}>
              <BottomSheetModalProvider>
                <Button title="Expand" onPress={handlePresentModalPress} />
                <BottomSheetModal
                  ref={bottomSheetModalRef}
                  index={0}
                  snapPoints={snapPoints}
                  enablePanDownToClose={true}
                  containerComponent={CustomContainerComponent}
                >
                  <BottomSheetView style={styles.sheetContentContainer}>
                    <Text>精美的 Bottom Sheet 内容 🎉</Text>
                    <Text>向下拖动或点击遮罩区域关闭</Text>
                  </BottomSheetView>
                </BottomSheetModal>
              </BottomSheetModalProvider>
            </GestureHandlerRootView>
          </View>
        </TestCase>
      </TestSuite>
    </Tester>
  );
};

const styles = StyleSheet.create({
  pageContainer: {
      height: '80%',
      backgroundColor: 'grey',
  },
  customContainer: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'center',
    alignContent:'center',
  },
  backdrop: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  sheetContentContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 16,
    backgroundColor: 'white',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
});
export default App;